<template>
  <a-layout-sider v-model="collapsed" :trigger="null" collapsible>
    <div class="logo" :class="{mini:collapsed}"></div>
    <a-menu theme="dark" mode="inline" :default-selected-keys="[title]">
      <a-menu-item :key="item.title" v-for="item in menu">
        <router-link :to="item.path">
          <a-icon :type="item.icon" />
          <span>{{item.title}}</span>
        </router-link>
      </a-menu-item>
    </a-menu>
  </a-layout-sider>
</template>

<script>
import { mapState } from "vuex";
export default {
  computed: {
    ...mapState(["collapsed"]),
    title() {
      return this.$route.meta.title;
    },
  },
 

  created() {
    this.menu = this.$router.options.routes[0].children
      .filter((r) => !r.meta.hideInMenu)
      .map((r) => ({
        title: r.meta.title,
        path: r.path,
        icon: r.meta.icon,
      }));
  },
  data() {
    return {
      activeKeys: [],
      menu: [],
    };
  },
};
</script>

<style scoped lang='scss'>
.logo {
  &.mini {
    height: 80px;
    width: 110px;
    margin: 10px 0 10px -15px;
  }
  height: 100px;
  width: 160px;
  margin: 10px auto;
  background: url(/img/logo.png) no-repeat center / 100% 100%;
}
</style>